<template>
  <el-table 
  :data="store.view.value.data" 
  style="width: 100%"
  v-my-loading="store"
  v-my-scroll-load="store"
  height="400px" 
  ref="tableRef"
  >
    <slot name="default"></slot>
    <slot name="empty">
      <el-button @click="retry">重试按钮</el-button>
    </slot>
  </el-table>
  <el-pagination background layout="prev, pager, next" :total="store.view.value.total" @current-change="currentChange"/>
</template>

<script lang="ts" setup>
import { defineComponent, onMounted} from 'vue';
import { tablePropsInterface } from './types'
import { vMyLoading } from '@/directives/vMyLoading'
import { vMyScrollLoad } from  '@/directives/vMyScrollLoad'

// props
const { store } = defineProps<tablePropsInterface>()

// 请求数据
onMounted(async ()=>{
  if(store && store.autoload){
    // setup 语法糖等于 setup 函数该函数允许 async await
    await store.searchData()
  }
})


// 翻页
async function currentChange(currentPage: number) {
  store.filterParams.value.page = currentPage
  store.filterParams.value.pageSize = 10
  store.filterParams.value.limit = 10
  
  await store.searchData()
}

// 重试
async function retry(){
  await store.searchData()
}


// 默认信息
defineComponent({
  name: 'xTable'
});
</script>

<style lang="scss">

</style>
